<!--<template>
</template>

<script>
</script>

<style>
</style>-->
<template>
  <div class="questClass-box">
  		<el-row :gutter="10">
  		<el-col :span="2"><el-button @click="multiDel">删除</el-button></el-col>
  		<el-col :span="2"><el-button @click="add">+ 新增</el-button></el-col>
  	</el-row>
    <Table
      :tableData="tableData"
      :inits="tableinits"
      canSelect
      @select="select_table"
      :operation="operationinits">
      <template slot-scope="{rowScope}">
        <el-button @click="edit(rowScope)" type="text" size="small">编辑</el-button>
        <el-button @click="del(rowScope,tableData)" type="text" size="small">删除</el-button>
      </template>
    </Table>
    <!-- 分页器 S -->
    <el-row>
      <el-col>
        <el-pagination
          layout="prev, pager, next"
          :page-size="15"
          :current-page="pageNo"
          :total="total"
          @current-change="pageNoChange">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 分页器 E -->
  </div>
</template>

<script>
import Table from '@/components/Table'
import { quest_fmt_getLabellist } from '@/util/dataFMT'
import multidel from '@/mixins/multidel'

export default {
  name: 'Labellist',
  components: {
    Table
  },
  mixins: [multidel],
  mounted () {
    this.$API.getLabellist({page:this.pageNo,type:'user'})
    .then(data => {
      this.total = data.total
      this.tableData = quest_fmt_getLabellist(data.data)
    })
    .catch(errmsg => {
      console.log(errmsg)
    })
  },
  data () {
    return {
      history: {},
      total: 0,
      pageNo: 1,
      tableData: [],
      tableinits: [
        { label: '编号', width: '55', prop: 'id' },
        { label: '角色名称', prop: 'name' },
        { label: '更新时间', width: '300', prop: 'updateTime' },
        { label: '创建时间', width: '300', prop: 'createTime' }
      ],
      operationinits: { width: '100', label: '操作' }
    }
  },
  watch: {
    history (curr) {
      console.log(curr)
      let arr = []
      for (const propname in curr) {
        arr = arr.concat(curr[propname])
      }
      this._mixSelectionChange(arr)
    }
  },
  methods: {
    multiDel () {
      this._mixMutiDel(`delLabellist`, () => {
        this.history = {}
        this.pageNoChange(1)
      })
    },
    select_table(row){
      this.history['index'+this.pageNo] = JSON.parse(JSON.stringify(row));
      this.history = Object.assign({}, this.history);
    },
    pageNoChange (pageNo) {
			this.pageNo = pageNo
      this.$API.getLabellist({page:pageNo,type:'user'})
      .then(data => {
				this.total = data.total
        this.tableData = quest_fmt_getLabellist(data.data)
        if(this.history['index'+pageNo]){
          this.tableData.forEach(item=>{
            this.history['index'+pageNo].forEach(ids =>{
              if(ids.id == item.id){
                item._select = true;
              }
            })
          })
        }
        this.$nextTick(()=>{
          this.tableData.forEach(item=>{
            if(item._select){
              _this.$refs.selectall.toggleRowSelection(item,true)
            }
          })
        })
      })
      .catch(errmsg => {
        console.log(errmsg)
      })
    },
    edit (scope) {
      this.$prompt('角色名称', '修改', {
				inputValue:scope.row.name,
      	confirmButtonText: '保存',
      	inputPattern: /.{1,}/,
      	inputErrorMessage: '名称不能为空'
      }).then(({ value }) => {
      	this.$API.editTagList(scope.row.id,{name:value,type:'user'})
      	.then(data => {
      		this.pageNoChange(1)
      	})
      }).catch(err=>{})
    },
     del (rowScope) {
			 this.$confirm('确认要删除该角色吗？','提示').then(res=>{
				 this.$API.delLabellist(rowScope.row.id)
				 .then(data => {
				 	this.tableData.splice(this.tableData.findIndex((el) => {
				 		return el.id === rowScope.row.id
				 	}), 1)
				 })
			 })
      },
    add () {
      this.$prompt('角色名称', '新增', {
        confirmButtonText: '保存',
        inputPattern: /.{1,}/,
        inputErrorMessage: '名称不能为空'
      }).then(({ value }) => {
        this.$API.addLabellist({name:value,type:'user'})
        .then(data => {
          this.pageNoChange(1)
        })
      })
    }
  }
}
</script>

<style>
 .questClass-box {
   text-align: left;
 }
</style>
